<template>
  <div>
    <el-form :model="queryParams" style="background: white;padding-top: 5px;" ref="queryForm" :inline="true" label-width="78px">
      <el-form-item label="地点名称">
        <el-input
          v-model="queryParams.addName"
          placeholder="请输入地点名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>
    <div id="map" style="width:100%;height:400px;" ref="mvw"></div>
  </div>
</template>

<script>
export default {
  name:"MapView",
  data() {
    return {
      queryParams: {},
      geocoder: null
    };
  },
  methods: {
    init() {
      let thiss = this;
      let address = "";
      let that = this;
      var center = new qq.maps.LatLng(34.815787, 113.537178);
      var map = new qq.maps.Map(document.getElementById('map'), {
        center: center,
        zoom: 13,
        disableDefaultUI: true
      });
      var marker = new qq.maps.Marker({
        position: center,
        map: map
      });
      var infoWin = new qq.maps.InfoWindow({
        map: map
      });
      this.geocoder = new qq.maps.Geocoder({
        complete: function (res) {
          console.log(res);
          address = res.detail.address;

          setTimeout(() => {
            infoWin.open();
            infoWin.setContent(
              '<div style="text-align:center;white-space:nowrap;">' +
              address +
              "</div>"
            );
            infoWin.setPosition(res.detail.location);
          }, 200);


          var fm = {};
          fm.city = res.detail.addressComponents.city;
          fm.province = res.detail.addressComponents.province;
          fm.area = res.detail.addressComponents.district;
          fm.address = res.detail.address
          fm.lat = res.detail.location.lat;
          fm.lng = res.detail.location.lng;
          thiss.$emit('gysClick', fm);
        }
      });
      qq.maps.event.addListener(map, "click", function (event) {
        this.longitude = event.latLng.getLat();
        this.latitude = event.latLng.getLng();
        console.log(event);
        let lat = new qq.maps.LatLng(this.longitude, this.latitude);
        thiss.geocoder.getAddress(lat);
      });
    },
    handleQuery(){
      this.geocoder.getLocation(this.queryParams.addName);
    }
  },
  mounted() {
    this.init();
  }
};
</script>
<style scoped>
</style>
